<template>
  <div class="container">
    <el-dialog
      v-if="dialogTableVisible"
      title="题目预览"
      :visible.sync="dialogTableVisible"
      :before-close="handleClose"
    >
      <!-- 第一行 -->
      <el-row style="margin-bottom:10px">
        <el-col :span="6">
          <div class="grid-content">【题型】: {{ questiontype }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">【编号】: {{ prevList.id }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">【难度】: {{ difficult }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">【便签】: {{ prevList.tags }}</div>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="6">
          <div class="grid-content">【学科】: {{ subject }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">【目录】: {{ directory }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">【方向】: {{ prevList.direction }}</div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-col :span="24">
        <div class="grid-content">【题干】:</div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content" v-html="prevList.question"></div>
      </el-col>
      <el-row>
        <el-col :span="24" style="margin-bottom:10px">
          <div class="grid-content">{{ questiontype }} 选项： (以下选中的选项为正确答案)</div>
        </el-col>
      </el-row>
      <!-- 多选框 -->
      <div v-if="questiontype === '多选题'">
        <el-checkbox-group
          v-model="checkbox"
          v-for="(opt, i) in prevList.options"
          :key="i"
          class="radioSelect"
        >
          <el-checkbox :label="opt.title"></el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 单选框 -->
      <div v-if="questiontype === '单选题'">
        <el-radio-group
          v-model="radio"
          v-for="(opt, i) in prevList.options"
          :key="i"
          class="radioSelect"
        >
          <el-radio :label="opt.title"></el-radio>
        </el-radio-group>
      </div>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            【参考答案】:
            <el-button type="danger" size="small" @click="isPlay = true">视频答案预览</el-button>
          </div>
        </el-col>
      </el-row>
      <video v-if="isPlay" :src="prevList.videoURL" autoplay muted class="videoBox"></video>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            【答案解析】:
            <div style="display:inline-block" v-html="prevList.answer"></div>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <div class="grid-content">【题目备注】: {{ prevList.remarks }}</div>
        </el-col>
      </el-row>
      <el-row justify="center" type="flex" class="closeBtn">
        <el-button type="primary" size="small" @click="handleClose">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { questionsListById } from '@/api/hmmm/questions.js' // 基础试题详情
import { list } from '@/api/hmmm/directorys.js' // 获取目录列表
import { listSubjects } from '@/api/hmmm/subjects.js' // 学科列表
export default {
  name: 'QuestionPreview',
  props: {
    id: {
      type: [Number, String, Object],
      required: true,
    },
    dialogTableVisible: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    handleClose() {
      this.$emit('close-dialog', false)
      this.isPlay = false // 关闭视频播放
    },
  },
  data() {
    return {
      prevList: {}, // 试题详情
      checkbox: [], // 多选复选框
      radio: '', // 单选框
      isPlay: false, // 控制视频显示和隐藏
      directory: '', // 目录
      subject: '', // 学科
    }
  },

  computed: {
    // 题型
    questiontype() {
      if (this.prevList.questionType == 1) {
        return '单选题'
      } else if (this.prevList.questionType == 2) {
        return '多选题'
      } else {
        return '简答题'
      }
    },
    // 难度
    difficult() {
      if (this.prevList.difficulty === '1') {
        return '简单'
      } else if (this.prevList.difficulty === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
  },
  watch: {
    id: async function (id, oldId) {
      console.log(this.dialogTableVisible, id)

      // 获取详细试题
      await questionsListById(id).then((item) => {
        // console.log(item);
        this.prevList = item.data
      })
      // 获取学科数据
      await listSubjects({ pagesize: 30 }).then((data) => {
        // console.log(data.data.items);
        // this.subject = data.data.items;
        data.data.items.forEach((ele) => {
          if (this.prevList.subjectID == ele.id) {
            this.subject = ele.subjectName
          }
        })
      })
      // 获取目录数据
      await list({ pagesize: 50 }).then((data) => {
        // console.log(data.data);
        data.data.items.forEach((ele) => {
          if (this.prevList.catalogID == ele.id) {
            this.directory = ele.directoryName
          }
        })
      })
      // 获取单选框和复选框的选中数据
      if (this.prevList.questionType == 1) {
        this.prevList.options.forEach((item, i) => {
          // console.log(item.isRight);
          if (item.isRight == 1) {
            this.radio = this.prevList.options[i].title
          }
        })
      } else if (this.prevList.questionType == 2) {
        this.prevList.options.forEach((item, i) => {
          if (item.isRight == 1) {
            this.checkbox.push(this.prevList.options[i].title)
          }
        })
      } else {
        console.log(321)
      }
    },
  },
}
</script>

<style scoped lang="less">
.container {
  /deep/.el-dialog {
    width: 900px;
    // height: 622px;
  }
  .radioSelect {
    display: block;
    margin-bottom: 20px;
  }
  .el-divider--horizontal {
    margin: 10px 0;
  }
  .videoBox {
    width: 400px;
    margin-top: 20px;
  }
  .closeBtn {
    margin-top: 30px;
  }
}
</style>
